<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>
        <%=global.name%>
    </title>

    <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/css/signin.css" rel="stylesheet">

    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.min.js"></script>

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<style type="text/css">
    /*******************
SELECTION STYLING
*******************/
    
    ::selection {
        color: #fff;
        background: #f676b2;
        /* Safari */
    }
    
    ::-moz-selection {
        color: #fff;
        background: #f676b2;
        /* Firefox */
    }
    /*******************
BODY STYLING
*******************/
    
    * {
        margin: 0 padding: 0;
        border: none;
        outline: none;
    }
    
    body {
        background-color: #333;
        font-family: Arial;
        font-weight: 300;
        text-align: left;
        text-decoration: none;
        height: 500px;
    }
    
    #wrapper {
        /* Center wrapper perfectly */
        width: 300px;
        height: 400px;
        margin: 70px auto;
    }
    /* Download Button (Demo Only) */
    
    .download {
        display: block;
        position: absolute;
        float: right;
        right: 25px;
        bottom: 25px;
        padding: 5px;
        font-weight: bold;
        font-size: 11px;
        text-align: right;
        text-decoration: none;
        color: rgba(0, 0, 0, 0.5);
        text-shadow: 1px 1px 0 rgba(256, 256, 256, 0.5);
    }
    
    .download:hover {
        color: rgba(0, 0, 0, 0.75);
        text-shadow: 1px 1px 0 rgba(256, 256, 256, 0.5);
    }
    
    .download:focus {
        bottom: 24px;
    }
    /*
.gradient {
	width: 600px;
	height: 600px;
	position: fixed;
	left: 50%;
	top: 50%;
	margin-left: -300px;
	margin-top: -300px;
	
	background: url(http://www.demo.amitjakhu.com/login-form/images/gradient.png) no-repeat;
}
*/
    
    .gradient {
        /* Center Positioning */
        width: 600px;
        height: 600px;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-left: -300px;
        margin-top: -300px;
        z-index: -2;
        /* Fallback */
        background-image: url(http://www.demo.amitjakhu.com/login-form/images/gradient.png);
        background-repeat: no-repeat;
        /* CSS3 Gradient */
        background-image: -webkit-gradient(radial, 0% 0%, 0% 100%, from(rgba(213, 246, 255, 1)), to(rgba(213, 246, 255, 0)));
        background-image: -webkit-radial-gradient(50% 50%, 40% 40%, rgba(213, 246, 255, 1), rgba(213, 246, 255, 0));
        background-image: -moz-radial-gradient(50% 50%, 50% 50%, rgba(213, 246, 255, 1), rgba(213, 246, 255, 0));
        background-image: -ms-radial-gradient(50% 50%, 50% 50%, rgba(213, 246, 255, 1), rgba(213, 246, 255, 0));
        background-image: -o-radial-gradient(50% 50%, 50% 50%, rgba(213, 246, 255, 1), rgba(213, 246, 255, 0));
    }
    /*******************
LOGIN FORM
*******************/
    
    .login-form {
        width: 300px;
        margin: 0 auto;
        position: relative;
        background: #f3f3f3;
        border: 1px solid #fff;
        border-radius: 5px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    }
    /*******************
HEADER
*******************/
    
    .login-form .header {
        padding: 40px 30px 30px 30px;
    }
    
    .login-form .header h1 {
        font-family: 'Bree Serif', serif;
        font-weight: 300;
        font-size: 28px;
        line-height: 34px;
        color: #414848;
        text-shadow: 1px 1px 0 rgba(256, 256, 256, 1.0);
        margin-bottom: 10px;
    }
    
    .login-form .header span {
        font-size: 11px;
        line-height: 16px;
        color: #678889;
        text-shadow: 1px 1px 0 rgba(256, 256, 256, 1.0);
    }
    /*******************
CONTENT
*******************/
    
    .login-form .content {
        padding: 0 30px 15px 30px;
    }
    /* Input field */
    
    .login-form .content .input {
        width: 188px;
        padding: 15px 25px;
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 400;
        font-size: 14px;
        color: #9d9e9e;
        text-shadow: 1px 1px 0 rgba(256, 256, 256, 1.0);
        background: #fff;
        border: 1px solid #fff;
        border-radius: 5px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
        -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
        -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
    }
    /* Second input field */
    
    .login-form .content .password,
    .login-form .content .pass-icon {
        margin-top: 25px;
    }
    
    .login-form .content .input:hover {
        background: #dfe9ec;
        color: #414848;
    }
    
    .login-form .content .input:focus {
        background: #dfe9ec;
        color: #414848;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
        -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
    }
    
    .user-icon,
    .pass-icon {
        width: 46px;
        height: 47px;
        display: block;
        position: absolute;
        left: 0px;
        padding-right: 2px;
        z-index: -1;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-bottomleft: 5px;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-bottom-left-radius: 5px;
    }
    
    .user-icon {
        top: 153px;
        /* Positioning fix for slide-in, got lazy to think up of simpler method. */
        background: rgba(65, 72, 72, 0.75) url(http://www.demo.amitjakhu.com/login-form/images/user-icon.png) no-repeat center;
    }
    
    .pass-icon {
        top: 201px;
        background: rgba(65, 72, 72, 0.75) url(http://www.demo.amitjakhu.com/login-form/images/pass-icon.png) no-repeat center;
    }
    
    .content input:focus + div {
        left: -46px;
    }
    /* Animation */
    
    .input,
    .user-icon,
    .pass-icon,
    .button,
    .register {
        transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
    }
    /*******************
FOOTER
*******************/
    
    .login-form .footer {
        padding: 25px 30px 40px 30px;
        overflow: auto;
        background: #d4dedf;
        border-top: 1px solid #fff;
        box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.15);
        -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.15);
        -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.15);
    }
    /* Login button */
    
    .login-form .footer .button {
        float: right;
        padding: 11px 25px;
        font-family: 'Bree Serif', serif;
        font-weight: 300;
        font-size: 18px;
        color: #fff;
        text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.25);
        background: #56c2e1;
        border: 1px solid #46b3d3;
        border-radius: 5px;
        cursor: pointer;
        box-shadow: inset 0 0 2px rgba(256, 256, 256, 0.75);
        -moz-box-shadow: inset 0 0 2px rgba(256, 256, 256, 0.75);
        -webkit-box-shadow: inset 0 0 2px rgba(256, 256, 256, 0.75);
    }
    
    .login-form .footer .button:hover {
        background: #3f9db8;
        border: 1px solid rgba(256, 256, 256, 0.75);
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    }
    
    .login-form .footer .button:focus {
        position: relative;
        bottom: -1px;
        background: #56c2e1;
        box-shadow: inset 0 1px 6px rgba(256, 256, 256, 0.75);
        -moz-box-shadow: inset 0 1px 6px rgba(256, 256, 256, 0.75);
        -webkit-box-shadow: inset 0 1px 6px rgba(256, 256, 256, 0.75);
    }
    /* Register button */
    
    .login-form .footer .register {
        display: block;
        float: right;
        padding: 10px;
        margin-right: 20px;
        background: none;
        border: none;
        cursor: pointer;
        font-family: 'Bree Serif', serif;
        font-weight: 300;
        font-size: 18px;
        color: #414848;
        text-shadow: 0px 1px 0 rgba(256, 256, 256, 0.5);
    }
    
    .login-form .footer .register:hover {
        color: #3f9db8;
    }
    
    .login-form .footer .register:focus {
        position: relative;
        bottom: -1px;
    }
    
    .login-form .footer a {
        text-decoration: none;
    }
    
    .checkbox {
        margin-top: 15px;
    }
</style>

<body>
    <div id="wrapper">

        <form name="login-form" class="login-form" action="" method="post">

            <div class="header">
                <h1>Login Form</h1>
                <span>As required to fill out the form below the login to my control center.</span>
            </div>

            <div class="content">
                <input id="inputUserName" name="username" type="text" class="input username" placeholder="Username" />
                <div class="user-icon"></div>
                <input id="inputPassword" name="password" type="password" class="input password" placeholder="Password" />
                <div class="pass-icon"></div>
                <div class="checkbox">
                    <label>
            <input type="checkbox" value="remember_me" id="remember_me"> Remember me
          </label>
                </div>
            </div>

            <div class="footer">


                <h5>If you don't have an account,please register first!  <a data-toggle="modal" 
   data-target="#myModal">Click here!</a></h5>

                <input id="submit" type="button" value="Login" class="button" />
            </div>


        </form>

    </div>
    <div class="gradient"></div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
                    <h4 class="modal-title" id="myModalLabel">
              注册用户
            </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-offset-1 col-sm-2 control-label">邮箱:</label>
                            <div class="col-sm-7">
                                <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class=" col-sm-offset-1 col-sm-2 control-label">用户名:</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" id="name" placeholder="请输入用户名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-offset-1 col-sm-2 control-label">密码:</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" id="pwd" placeholder="请输入密码">
                            </div>
                        </div>

                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button>
                    <button id="register" type="button" class="btn btn-primary"> 注册</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
</body>
<script type="text/javascript">
    $(function() {
        $("#submit").click(function() {
            var username = $('#inputUserName').val();
            var password = $('#inputPassword').val();

            $.ajax({
                type: "POST",
                cache: false,
                url: "/api/user/login",
                data: {
                    username: username,
                    password: password,
                },
                success: function(msg) {
                    if (msg.status != 0) {

                        return;
                    } else {
                        window.location.href = '/admin/artlist';
                    }
                }
            });

            return false;
        });

        if (localStorage.chkbx && localStorage.chkbx != '') {
            $('#remember_me').attr('checked', 'checked');
            $('#inputUserName').val(localStorage.usrname);
            $('#inputPassword').val(localStorage.inputPassword);
        } else {
            $('#remember_me').removeAttr('checked');
            $('#inputUserName').val('');
            $('#inputPassword').val('');
        }

        $('#remember_me').click(function() {

            if ($('#remember_me').is(':checked')) {
                // save inputUserName and password
                localStorage.usrname = $('#inputUserName').val();
                localStorage.inputPassword = $('#inputPassword').val();
                localStorage.chkbx = $('#remember_me').val();
            } else {
                localStorage.usrname = '';
                localStorage.inputPassword = '';
                localStorage.chkbx = '';
            }
        });

        $('#inputPassword').keydown(function(event) {
            if (event.keyCode == 13) {
                $('#submit').click();
            }
        });
        $('#register').click(function() {
            var name = $('#name').val();
            var nickname = $('#nickname').val();
            var pwd = $('#pwd').val();
            var email = $('#email').val();

            if (name != '' && pwd != '' && email != '') {
                $.ajax({
                    type: "POST",
                    cache: false,
                    url: "/api/user/signUp",
                    data: {
                        name: name,
                        pwd: pwd,
                        email: email
                    },
                    success: function(msg) {
                        if (msg.status != 0) {
                            return;
                        } else {
                            window.location.href = '/admin/artlist';
                        }
                    }
                });
            }
        });
    });
</script>

</html>